<template>
  <div>
    <el-card style="width:100%">
      <p>物料分类</p>
      <el-button type="primary" style="margin:15px 0;" @click="addMat">新增物料分类</el-button>
      <div class="tableBox">
        <!-- 表格 -->
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe>
          <el-table-column prop="cateName"
                           label="主类别"
                           align="center"></el-table-column>
          <!--<el-table-column prop="pic" label="图标" align="center">
	          <template slot-scope="scope">
	            <div class="msgofbusniess">
	              <img :src="pic" min-width="91" width="91" height="91"/>
	            </div>
	          </template>
          </el-table-column>-->
          <!--
          <el-table-column prop="remark"
                           label="备注"
                           align="center"></el-table-column>
                           -->
          <el-table-column prop="addTime"
                           label="添加时间"
                           align="center"></el-table-column>
          <!-- <el-table-column prop="isShow"
                           label="是否推荐"
                           align="center"></el-table-column> -->
          <el-table-column label="操作"
                           align="center"
                           fixed="right"
                           width="350">
            <template slot-scope="scope">
              <el-row>
                <el-button size="mini"
                           type="primary"
                           @click="addBtn(scope.row)">添加子类</el-button>
                <el-button type="primary"
                           size="mini"
                           @click="modifyBtn(scope.row)"
                           icon="el-icon-edit"></el-button>
                <el-button type="primary"
                           size="mini"
                           @click="detailBtn(scope.row)">子类管理</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="updateDelete(scope.row)"></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageParams.currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageParams.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pageParams.total"></el-pagination>
      </div>
    </el-card>

    <el-dialog title="编辑" :visible.sync="dialogMoldifyFormVisible">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left" label-width="120px">
          <el-form-item label="主类别" prop="cateName" style="width:50%">
            <el-input v-model="addForm.cateName" ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width:50%">
            <el-input v-model="addForm.remark" ></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否推荐" prop="isShow" style="width:50%">
            <el-radio v-model="addForm.isShow" label="1">推荐</el-radio>
            <el-radio v-model="addForm.isShow" label="2">不推荐</el-radio>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogMoldifyFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateSupplier">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="主类别" :visible.sync="dialogDetailFormVisible">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="120px">
        <el-form-item label="新增主类别" prop="cateName" style="width:50%">
          <el-input v-model="addForm.cateName" placeholder="请输入主类别"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width:50%">
          <el-input v-model="addForm.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMainMat">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="子类" :visible.sync="dialogChildFormVisible">
        <el-form ref="addForm" :model="addChildForm" :rules="rules"  label-width="120px" >
        <el-form-item label="新增子类" prop="cateName" style="width:50%">
          <el-input v-model="addChildForm.cateName" placeholder="请输入子类"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width:50%">
          <el-input v-model="addChildForm.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChildFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChildMal">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog :title="maintitle" :visible.sync="showDetail" width="60%">
      <el-table :data="tableChildData">
        <el-table-column property="id" label="id"></el-table-column>
        <el-table-column property="cateName" label="子类别"></el-table-column>
        <el-table-column property="remark" label="备注"></el-table-column>
        <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-row>
                <el-button type="primary"
                           size="mini"
                           @click="modifyChildBtn(scope.row)"
                           icon="el-icon-edit"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="updateDelete(scope.row)"></el-button>
              </el-row>
            </template>
          </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { CATEGORY_LISTF,CATEGORY_ADD,CATEGORY_UPDATE,CATEGORY_CHILD_LIST ,CATEGORY_DEL} from "@/utils/api";
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      maintitle:'',
      tableChildData: [{
          id: '1',
          name: 'aaaa',
        }, {
          id: '2',
          name: 'bbbb',
        }, {
          id: '3',
          name: 'cccc',
        }, {
          id: '4',
          name: 'dddd',
        }],
      mainId:0,
      dialogMoldifyFormVisible: false,
      dialogDetailFormVisible: false,
      dialogChildFormVisible: false,
      addChildForm:{
        pid:'',
        cateName: '',
        remark:''
      },
      addForm: {
        id: '',
      	pid:'',
        cateName: '',
        sort: '',
        isShow: '1',
        pic:'',
        remark:''
      },
      rules: {
          cateName: [
            { required: true, message: '请输入产品族', trigger: 'blur' },
          ],
          //remark: [
            //{ required: true, message: '请输入备注', trigger: 'blur' },
          //],
          // sort: [
          //   { required: true, message: '请输入排序', trigger: 'blur' }
          // ],
          // isShow: [
          //   { required: true, message: '请选择是否推荐', trigger: 'blur' }
          // ]
        },
      // 查询条件
      searchCondition: {},
      // 表格数据
      tableData: [],
      // 分页参数
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 50
      },
      // 详情弹窗
      supplierInfo: {},
      showDetail: false
    }
  },
  mounted () {
    // 初始化查询
    this.queryListAct()
  },
  methods: {
    getchildList(row){
      CATEGORY_CHILD_LIST({
        id: row.id,
        pageNo:1,
        pageSize:100
      }).then(res => {
        if(res.status==200){
          this.tableChildData=res.data.dataList;
        }
      });
    },
    updateSupplier(){
      CATEGORY_UPDATE({
        id: this.addForm.id,
        pid:this.addForm.pid,
        cateName: this.addForm.cateName,
        sort:0,
        isShow:1,
        remark:this.addForm.remark,
        pic:this.addForm.pic
      }).then(res => {
        if(res.status==200){
          this.$message.success('更新成功') 
          this.dialogMoldifyFormVisible = false
          this.queryListAct()
        }
      });
    },
    addMat(){
      this.dialogDetailFormVisible=true
    },
    addMainMat(){
      //主类 pid 为0
      CATEGORY_ADD({
      	pid:0,
        cateName:this.addForm.cateName,
        remark:this.addForm.remark
      }).then(res => {
        if(res.status==200){
          this.$message.success('新增成功') 
          this.dialogDetailFormVisible = false
          this.queryListAct()
        }
      });
    },
    addSupplier(){
      CATEGORY_ADD({
      	pid:this.addForm.pid,
        cateName:this.addForm.cateName,
        sort: this.addForm.sort,
        isShow:1,
        remark:this.addForm.remark,
        pic:this.addForm.pic
      }).then(res => {
        if(res.status==200){
          this.$message.success('新增成功')  
          this.$router.push({ path: "Materials" })
        }
      });
    },
    // 新增按钮
    addBtn (row) {
      this.dialogChildFormVisible=true
      this.mainId=row.id
    },
    // 修改按钮
    modifyChildBtn (row) {
      this.dialogMoldifyFormVisible=true
      this.addForm=row
      // this.$router.push({
      //   path: "MaterialsModify",
      //   query: {
      //     data: row
      //   }
      // });
    },
    // 修改按钮
    modifyBtn (row) {
      this.dialogMoldifyFormVisible=true
      this.addForm=row
      // this.$router.push({
      //   path: "MaterialsModify",
      //   query: {
      //     data: row
      //   }
      // });
    },
    addChildMal(){
      CATEGORY_ADD({
      	pid:this.mainId,
        cateName:this.addChildForm.cateName,
        remark:this.addChildForm.remark
      }).then(res => {
        if(res.status==200){
          this.$message.success('新增子类成功')  
          this.dialogChildFormVisible=false
          this.queryListAct()
        }
      });
    },
    // 详情按钮
    detailBtn (row) {

      console.log("jsw",row)
      this.maintitle = row.cateName + "子分类信息"

      this.showDetail = true
      this.getchildList(row)
    },
    // (启动弹窗)删除
    updateDelete (_scope) {
      this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          CATEGORY_DEL({
            id: _scope.id,
          }).then(res => {
            this.queryListAct()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      this.showDetail = false
      this.queryListAct()
    },
    // 列表查询
    queryListAct () {
      CATEGORY_LISTF({
        pageNo: this.pageParams.currentPage,
        pageSize: this.pageParams.pageSize
      }).then(res => {
        console.log(res.data)
        this.tableData = res.data.dataList;
        this.pageParams.total = res.data.count;
        for (let i in this.tableData) {
          // if (this.tableData[i].isShow == 1) {
          //   this.tableData[i].isShow = '是'
          // } else {
          //   this.tableData[i].isShow = '否'
          // }
          this.tableData[i].addTime = this.formatSecond(this.tableData[i].addTime)
        }
      });
    },
    // 改变页尺寸
    handleSizeChange (val) {
      this.pageParams.pageSize = val
      this.queryListAct();
    },
    // 改变页码
    handleCurrentChange (val) {
      this.pageParams.currentPage = val
      this.queryListAct();
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>
<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>